/* 全局样式 */
page {
    background-color: #F5F5F5;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
        'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* 主题色定义 */
:root {
    --primary: #89CFF0;
    --secondary: #B7F0AD;
    --accent: #FFD1DC;
    --dark: #5A7D9A;
}

/* 隐藏滚动条 */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 卡片阴影 */
.card-shadow {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 按钮悬停效果 */
.btn-hover {
    transition: all 0.3s ease;
}

/* 文字省略 */
.line-clamp-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-clamp-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 渐变背景 */
.gradient-bg {
    background: linear-gradient(135deg, #89CFF0 0%, #B7F0AD 100%);
}

/* 图标样式 */
.icon {
    font-family: 'FontAwesome';
}

/* 系统适配样式 */
/* 状态栏安全区域 */
.status-bar-safe-area {
    width: 100%;
    background-color: transparent;
}

/* 导航栏安全区域 */
.nav-bar-safe-area {
    width: 100%;
    background-color: transparent;
}

/* 底部安全区域 */
.bottom-safe-area {
    width: 100%;
    background-color: transparent;
}

/* iPhone X 系列适配 */
.safe-area-inset-top {
    padding-top: 0;
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
}

.safe-area-inset-bottom {
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

.safe-area-inset-left {
    padding-left: 0;
    padding-left: constant(safe-area-inset-left);
    padding-left: env(safe-area-inset-left);
}

.safe-area-inset-right {
    padding-right: 0;
    padding-right: constant(safe-area-inset-right);
    padding-right: env(safe-area-inset-right);
}

/* 全方位安全区域适配 */
.safe-area-all {
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    padding-right: constant(safe-area-inset-right);
    padding-right: env(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: constant(safe-area-inset-left);
    padding-left: env(safe-area-inset-left);
}

/* 固定顶部安全区域 */
.fixed-safe-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
}

/* 固定底部安全区域 */
.fixed-safe-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

/* 全屏适配 */
.full-screen {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* 安全区域容器 */
.safe-container {
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    padding-right: constant(safe-area-inset-right);
    padding-right: env(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: constant(safe-area-inset-left);
    padding-left: env(safe-area-inset-left);
    box-sizing: border-box;
}